<template>
  <div class="rank-list">
    <h3 class="title">{{ title }}</h3>
    <div class="box">
      <div class="rank-info" v-for="(item,index) in data" :key="index"
        @click="itemClick(item,index)">
        <div class="rank-num">
          <span>{{ getNameRank(item.lastRank) }}</span>
        </div>
        <div class="rank-img">
          <img v-lazy="item.cover" alt="" srcset="">
        </div>
        <div class="rank-msg">
          <span>{{ item.name }}</span>
          <span>{{ item.artistName }}</span>
        </div>
      </div>
    </div>    
    
  </div>
</template>

<script>
  import Bus from '../../../common/js/bus'

  export default {
    props:{
      title:String,
      data:Array,
    },

    data() {
      return {
        singerName:'',
        SingerId:'',
        videoName:'',
      }
    },
    
    methods:{
      getNameRank(Num){
        if(Num >= 10){
          return Num;
        }else{
          if(Num == -1){
            return Num = 10;
          }else {
            return ('0'+Num);
          }
        }
      },

      itemClick(item,index){
        // console.log(item);
        let singerInfo = item.artists
        this.videoName = item.name;
        if(singerInfo.length == 1){
          this.singerName = singerInfo[0].name;
          this.SingerId = singerInfo[0].id;
        }else{
          this.SingerId = singerInfo[0].id;
          let singername = [];
          singerInfo.forEach((element) => {
            singername.push(element.name);
          });
          this.singerName = singername.join();
        }
        this.$session.setItem('singerid',this.SingerId);
        this.$session.setItem('singername',this.singerName);
        this.$session.setItem('videoname',this.videoName);
        Bus.$emit('singerid',this.SingerId);
        Bus.$emit('singername',this.singerName);
        Bus.$emit('videoname',this.videoName);
        // console.log(this.singerName);
        // console.log(this.SingerId);
        this.$router.push({path:'/playmv/'+item.id});
      }
    }
  }
</script>

<style scoped>
.title{
  padding-left: 10px;
}

.rank-info{
  display: flex;
  align-items: center;
  width: 50%;
  /* padding-left: 5px; */
}

.box {
  display: flex;
  flex-wrap: wrap;
  padding-top: 10px;
}

.rank-num{
  display: flex;
  padding-right: 5px;
  padding-left: 5px;
}

.rank-img img{
  width: 80px;
  height: 80px;
  border-radius: 5px;
  padding-bottom: 10px;
  color: rgb(80, 80, 80);
}

.rank-msg{
  display: flex;
  flex-direction: column;
  padding-left: 5px;
  font-size: 9px;
  color: #666666;
}
</style>